<template>
    <div class="bomb">
        <slider :content='sliderImgs'></slider>
        <div v-for="(item,index) in realData" :key="index">
            <div class="bmob-single-product" v-if="item['typesetting'] == 0">
                <star-title :content='item["name"]'></star-title>
                <div class="single-product-list">
                    <buy-spree-integral :content='item.goods'></buy-spree-integral>
                </div>
            </div>
            <div class="current-hot" v-if="item['typesetting'] == 2">
                <star-title :content='item["name"]'></star-title>
                <div class="bmob-current-hot-list">
                    <recommend-card :content='item.goods'></recommend-card>
                </div>
            </div>
            <div class="mother-kids" v-if="item['typesetting'] == 1">
                <star-title :content='item["name"]'></star-title>
                <div class="mother-kids-list">
                    <buy-spree-integral :content='item.goods'></buy-spree-integral>
                </div>
            </div>
            <!-- <div class="mzc-blue" >
                <star-title :content='titleList[2]'></star-title>
                <div class="mzc-blue-list">
                    <buy-spree-integral :content='virtual.activityGoodsIntegral'></buy-spree-integral>
                </div>
            </div>
            <div class="mother-kids">
                <star-title :content='titleList[3]'></star-title>
                <div class="mother-kids-list">
                    <buy-spree-integral :content='virtual.activityGoodsIntegral'></buy-spree-integral>
                </div>
            </div>
            <div class="show-firends">
                <star-title :content='titleList[4]'></star-title>
                <div class="show-firends-list">
                    <buy-spree :content='virtual.activityGoodsIntegral'></buy-spree>
                </div>
            </div> -->
        </div>
        <nothing></nothing>
    </div>
</template>

<script>
import virtualData from './virtual'
import slider from '../../public/slider'
import starTitle from '../../public/starTitle'
import doubleGoods from '../../public/doubleGoods'
import buySpreeIntegral from '../../public/buySpreeIntegral'
import buySpree from '../../public/buySpree'
import recommendCard from '../../public/recommendCard'
import nothing from '../../public/nothing'

export default {
    name:'bomb',
    data(){
        return {
            virtual:virtualData,
            titleList:['热卖单品', '应季热卖', '美赞臣蓝臻', '母婴尖货', '火遍辅食界的嘉宝'],
            sliderImgs:[],
            realData:[]
        }
    },
    methods:{
        getSliders(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.mainSliders+4, null, token, function(res){
                // console.log(res);
                if(res.data['error_code'] == 0){
                    that.sliderImgs = res.data['msg'];
                    that.transferUrl(that.sliderImgs);
                }
            })
        },
        getBombList(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.homeFive+4, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.realData = res.data['msg'];
                }
            })
        }
    },
    mounted(){
        this.getSliders();
        this.getBombList();
    },
    components:{
        slider,
        starTitle,
        doubleGoods,
        buySpreeIntegral,
        recommendCard,
        buySpree,
        nothing
    }
}
</script>

<style lang='less'>
@rem:100rem;

.bomb{
    width: 100%;
    margin-bottom: 96/@rem;
    .single-product-list{
        padding-bottom: 6/@rem;
        background: #fdd188;
    }
    .bmob-current-hot-list{
        padding: 3/@rem 0;
        background: #fec3e1;
    }
    .mzc-blue-list{
        background: #55b5fa;
        padding-bottom: 6/@rem;
    }
    .mother-kids-list{
        background: #3db7e1;
        padding-bottom: 6/@rem;
    }
    .show-firends-list{
        background: #fdd188;
        padding-bottom: 6/@rem;
    }
}
</style>
